@use "../../../assets/scss/functions" as *;
@use "../../../assets/scss/vars" as *;
@use "../../../assets/scss/mixins" as *;
@use "../../../assets/scss/comm.scss";

.img-radius {
    width: 100%;
    clip-path: ellipse(75% 60% at 50% 36%);
}

.border-radius-demo01 {
    width: 100%;
    height: px2vmin(100);
    border-radius: 50%;
}

.border-radius-demo02 {
    width: 100%;
    height: px2vmin(100);
    border-radius: 0 0 50% 50%;
}

.border-radius-demo03 {
    width: 100%;
    height: px2vmin(100);
    border-radius: 0 0 30% 30%;
}

/*
    详见: 
    https://juejin.cn/post/7308434314777788426
    https://blog.csdn.net/Fighting_No1/article/details/108962318
    https://blog.csdn.net/weixin_39015132/article/details/82343928
    https://blog.csdn.net/weixin_43964148/article/details/103417959
    https://juejin.cn/post/6991817797202345997
    https://blog.csdn.net/weixin_45423865/article/details/106191746
    https://juejin.cn/post/6854573211741667342
*/
.border-radius-demo04 {
    width: 100%;
    height: px2vmin(100);
    position: relative;
    overflow: hidden;

    &::after {
        content: "";
        bottom: 0;
        display: block;
        width: 100%;
        // left: -20%;
        height: px2vmin(50);
        background: white;
        border-radius: 50% 50% 0 0;
        position: absolute;
    }
}

.border-radius-demo05 {
    width: 100%;
    height: px2vmin(230);
    border-radius: 0 0 30% 30%;
    // 微信小程序的 background-image 仅支持网络图片或base64图片
    background-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg);
    background-size: cover;
    background-position: 0 70%;
    background-repeat: no-repeat;
}

.border-radius-demo06 {
    width: 100%;
    height: px2vmin(160);
    position: relative;
    overflow: hidden;
    // 微信小程序的 background-image 仅支持网络图片或base64图片
    background-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg);
    background-size: cover;
    background-position: 0 70%;
    background-repeat: no-repeat;

    &::after {
        content: "";
        bottom: 0;
        display: block;
        width: 100%;
        height: px2vmin(50);
        background: white;
        border-radius: 50% 50% 0 0;
        position: absolute;
    }
}